<template>
	<!-- 头部logo -->
	<van-sticky>
		<div class="rg_logo">
			<van-row class="rg_logo" type="flex" justify="space-between" align="center">
				<van-col span="12">
					<div class="rg_logoicon">

					</div>
				</van-col>
				<van-col class="rg_changebtn" span="8">
					<van-button class="rg_btn" round type="defalut">下载APP</van-button>
				</van-col>

			</van-row>
		</div>

		<!-- <div class="tab">
			<van-tabs v-model="active" @click="onClick">
				<van-tab v-for="item in tabcontent" :title="item.text" :key='item.id'>
				</van-tab>
			</van-tabs>
		</div> -->
		
		
		<van-tabs v-model="active">
		  <van-tab title="推荐音乐"><Recommend></Recommend></van-tab>
		  <van-tab title="热歌榜"><Hot></Hot></van-tab>
		  <van-tab title="搜索"><Search></Search></van-tab>
		</van-tabs>


		<!-- <div class="tab">
			<ul class="nav_ul">
				<li v-for="item in tabcontent" class="nav_li">
					<router-link :to="item.path" class="text">{{item.text}}</router-link>
				</li>
			</ul>
		</div> -->



	</van-sticky>
	<!-- <router-view></router-view> -->
</template>

<script scoped>
	import Hot from './Hot.vue';
	import Search from './Search.vue';
	import Recommend from './Recommend.vue';
	
	
	export default {
		name: 'Head',
		components: {
			Hot,
			Search,
			Recommend,
		},
		data() {
			return {
				active: "",
				tabcontent: [{
						"text": "推荐音乐",
						"path": "/recommend",
					},
					{
						"text": "热歌榜",
						"path": "/Hot",
					},
					{
						"text": "搜索",
						"path": "/search",
					},
				],
			}

		},
		methods: {
			onClick(name, title) {
				switch (name) {
					case 0:
						this.active = 0;
						this.$router.push('/recommend');
						break;
					case 1:
						this.active = 1;
						this.$router.push('/hot');
						break;
					case 2:
						this.active = 2;
						this.$router.push('/search');
						break;
					defaut:
						console.log("Please click it!");
						break;
				}
			},
		},
	}
</script>

<style scoped>
	.rg_logo {
		width: 100%;
		height: 84px;
		background-color: #d43c33;

	}

	.rg_logoicon {
		width: 3.963415rem;
		height: 0.909756rem;
		background: url('../assets/img/logo.png') no-repeat;
		background-size: cover;
		margin-left: 0.243902rem;
	}

	.rg_btn {
		color: #d43c33;
		background-color: #fff;
		border: 0;

	}

	.rg_changebtn>>>.van-button {
		height: 0.97561rem;
	}

	.rg_changebtn>>>.van-button--normal {
		padding: 0 17px;
	}

	.rg_changebtn>>>.van-button--normal {
		font-size: 16px;
	}
</style>
